<template>
  <div class="box">
    <div class="el-card_body">
      <el-form
        ref="carListForm"
        :model="carListForm"
        :rules="carListRules"
        label-width="80px"
      >
        <el-row type="flex" justify="start">
          <el-col :span="8">
            <el-form-item label="车辆类型:" prop="truckTypeId">
              <el-select
                :style="{ width: '100%' }"
                v-model="carListForm.truckTypeId"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in carListOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号码:" prop="licensePlate">
              <el-input
                v-model="carListForm.licensePlate"
                placeholder="请输入车牌号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="btnbox">
              <el-button
                type="primary"
                size="medium"
                style="height: 40px"
                @click="searchCar"
                >搜索</el-button
              >
              <el-button size="medium" @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- ===============盒子2====可选按钮====================== -->
    <div class="el-card_body1">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="menuSelect"
        style="height: 100%"
      >
        <el-row style="height: 100%">
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="1"
              ><span>全部</span><span>{{ total }}</span></el-menu-item
            ></el-col
          >
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="2"
              ><span>可用</span><span>{{ carNumCanuse }}</span></el-menu-item
            ></el-col
          ><el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="3"
              ><span>停用</span><span>{{ carNumStopuse }}</span></el-menu-item
            ></el-col
          >
        </el-row>
      </el-menu>
    </div>
    <!-- ===============盒子三================= -->
    <div class="el-card_body2">
      <el-button
        type="primary"
        size="medium"
        style="height: 40px"
        @click="dialogFormVisible = true"
        >新增车辆</el-button
      >
      <!-- 数据table -->

      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          size="mini"
          :header-cell-style="{ background: '#f8faff', color: '#818693' }"
        >
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号码" width="156">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="车辆类型" width="156">
          </el-table-column>
          <el-table-column prop="driverNum" label="司机数量" width="156">
          </el-table-column>
          <el-table-column prop="workStatus" label="车辆状态" width="156">
            <template v-slot="{ row }">
              <span v-if="row.workStatus === 1"
                ><span class="status1"></span> 启用
              </span>
              <span v-else> <span class="status2"></span> 停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备号" width="235">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="实载重量(T)" width="235">
          </el-table-column>
          <el-table-column
            prop="allowableVolume"
            label="实载体积(方)"
            width="235"
          >
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot="{ row }">
              <el-button
                @click="$router.push(`/transit/vehicle-detail/${row.id}`)"
                type="text"
                size="medium"
                :style="{
                  color: '#409EFF',
                }"
                >查看详情</el-button
              >
              <span
                :style="{
                  color: '#dcdfe6',
                }"
              >
                |
              </span>
              <el-button
                type="text"
                size="medium"
                :style="{ color: '#409EFF' }"
                @click="showEnableDialog = true"
                >启用</el-button
              >
              <span
                :style="{
                  color: '#dcdfe6',
                }"
              >
                |
              </span>
              <el-button
                type="text"
                size="medium"
                :style="{ color: '#409EFF' }"
                @click="showConfigDialog = true"
                >配置司机</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <template>
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="7">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.carListForm.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination
            ></el-col>
          </el-row>
        </template>
      </template>
    </div>
    <!-- _______________________新增车辆弹窗___________________________________ -->
    <el-dialog
      title="新增车辆"
      :visible.sync="dialogFormVisible"
      width="30%"
      :before-close="btnCancel"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        label-width="130px"
      >
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="车辆类型" required prop="truckTypeId">
              <el-select
                v-model="addForm.truckTypeId"
                placeholder="请选择"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in carListOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="车牌号码" required prop="licensePlate">
              <el-input
                v-model="addForm.licensePlate"
                placeholder="请输入车牌号码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="GPS设备ID" required prop="deviceGpsId">
              <el-input
                v-model="addForm.deviceGpsId"
                placeholder="请输入GPS设备ID"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" :gutter="10">
          <el-col :span="8">
            <div class="btnbox">
              <el-button
                type="primary"
                size="medium"
                style="height: 40px"
                @click="btnOk"
                >确定</el-button
              >
              <el-button size="medium" @click="btnCancel">取消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <enable :show-enable-dialog.sync="showEnableDialog"></enable>
    <configuration :showConfigDialog.sync="showConfigDialog" />
  </div>
</template>

<script>
// 导入api
import { getCarList, addTruck } from "@/api/car-models.js";
import Enable from "./Enable.vue";
import Configuration from "./Configuration.vue";
export default {
  components: { Enable, Configuration },
  data() {
    return {
      // 车辆启用弹窗
      showEnableDialog: false,
      // 配置司机弹窗
      showConfigDialog: false,
      carListForm: {
        licensePlate: "",
        truckTypeId: null,
        page: 1,
        pageSize: 10,
        workStatus: null,
      },
      carListRules: {},
      carListOptions: [],
      // 数据table
      tableData: [
        {
          id: "1660911623981305857",
          truckTypeId: "1575066321985286145",
          truckTypeName: "4.2米箱式货车",
          brand: "Ut in commodo consectetur",
          licensePlate: "琼B 12345",
          deviceGpsId: "85",
          allowableLoad: 1232222,
          allowableVolume: 10,
          truckLicenseId: "26",
          status: 62,
          runStatus: 14,
          workStatus: 35,
          transportLineName: null,
          driverName: "",
          driverNum: 0,
          loadingRatio: 73,
          picture: "http://dummyimage.com/400x400",
        },
      ],
      // 分页
      total: 0,
      // 导航栏
      activeIndex: "1",
      carNumAll: 0,
      carNumCanuse: 0,
      carNumStopuse: 0,
      // 新增车辆弹窗
      dialogFormVisible: false,
      // 新增车辆弹窗表单
      addForm: {
        licensePlate: "",
        deviceGpsId: "",
        truckTypeId: "",
      },
      addRules: {
        licensePlate: [
          { required: true, message: "请输入车牌号码", trigger: "blur" },
        ],
        deviceGpsId: [
          { required: true, message: "请输入GPS设备ID", trigger: "blur" },
        ],
        truckTypeId: [
          { required: true, message: "请选择车辆类型", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 获取车辆分页数据
    async getCarList() {
      const { counts, items } = await getCarList(this.carListForm);
      this.tableData = items;
      this.total = Number(counts);
      // 将车辆类型隐射到下拉框
    },
    // 获取下拉框的数据
    async getCarListOptions() {
      const { items, counts } = await getCarList({ page: 1, pageSize: 150 });
      items.filter((v) => {
        if (v.workStatus === 1) {
          this.carNumCanuse++;
        }
      });
      this.carNumStopuse = counts - this.carNumCanuse;
      let temp = items.map((item) => {
        return {
          label: item.truckTypeName,
          value: item?.truckTypeId,
        };
      });
      // 去重
      let obj = {};
      this.carListOptions = temp.reduce((cur, next) => {
        obj[next.value] ? "" : (obj[next.value] = true && cur.push(next));
        return cur;
      }, []);
    },
    //页码条数改变
    handleSizeChange(val) {
      this.carListForm.pageSize = val;
      this.getCarList();
    },
    handleCurrentChange(val) {
      this.carListForm.page = val;
      this.getCarList();
    },
    // 导航栏
    menuSelect() {},
    // 新增车辆弹窗
    // 关闭和取消弹窗
    btnCancel() {
      this.dialogFormVisible = false;
      this.$refs.addForm.resetFields();
    },
    // 弹窗确定按钮
    btnOk() {
      this.addTruck();
    },
    // 新增车辆
    async addTruck() {
      await addTruck(this.addForm);
      this.getCarList();
      this.btnCancel();
    },
    // 搜索车辆
    async searchCar() {
      const { items, counts } = await getCarList(this.carListForm);
      this.tableData = items;
      // DOM加载元素后再执行

      items.filter((v) => {
        // 重置计数
        this.carNumCanuse = 0;
        if (v.workStatus === 1) this.carNumCanuse++;
      });
      this.carNumStopuse = counts - this.carNumCanuse;
      this.total = Number(counts);
    },
    // 搜索框重置
    resetSearchForm() {
      this.$refs.carListForm.resetFields();
      // 重新获取数据
      this.getCarList();
    },
  },
  created() {
    this.getCarList();
    this.getCarListOptions();
  },
};
</script>

<style lang="scss" scoped>
.box {
  overflow: hidden;
  margin: 0 auto;
  background-color: #f3f4f7;
}
.el-card_body {
  padding: 20px 0 0 0;
  background-color: #fff;
  .el-form {
    .el-row {
      flex-wrap: wrap;
      .btnbox {
        padding-left: 20px;
        .el-button {
          width: 90px;
        }
      }
    }
    .el-form-item {
      padding: 0 30px;
      .el-form-item__label {
        color: #20232a !important;
      }
    }
  }
}
.el-card_body1 {
  margin: 20px 0 0 0;
  height: 48px;
  .is-active {
    color: #e7775e;
    background-color: #ffeeeb;
    border-bottom-color: none;
  }
  .el-menu-item:not(.is-disabled):focus,
  .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: #e7775e;
  }
  .el-menu-item {
    height: 100%;
    line-height: 48px;
    font-size: 14px;
    text-align: center;
    span {
      padding: 0 2px;
      font-weight: 700;
    }
  }
}
.el-card_body2 {
  padding: 28px;
  margin-top: 20px;
  background-color: #ffffff;
  .el-table {
    margin: 20px 0px;
    border: 1px solid #ebeef5;
    font-size: 14px;
    color: #20232a;
    .status1,
    .status2 {
      background: #67c23a;
      // 圆点
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .status2 {
      background: #f56c6c;
    }
  }
  .el-row {
    margin-top: 20px;
  }
}
</style>
